<template>
 <GlobalCardBox title="文章设置" :showDown="this.ARTICLEDETAILSETDOWN">

  
    <div slot="content" id="content" class="flex">
        <div v-for="(fun,index) in funData" :key="index" class="dataOne flex" :style="getIconStyle(fun.color)" @click="SelectFun(fun)">
            <font-awesome-icon  :icon="fun.icon" class="icon" />
            <div class="label" >{{fun.label}}</div>
        </div>
        
    </div>
</GlobalCardBox>
</template>
<script>
import GlobalCardBox from '@/components/Package/GlobalCardBox/GlobalCardBox.vue'
import { mapActions, mapMutations, mapState } from 'vuex'
import common from "@/common/global"
  export default 
  {
     components: { GlobalCardBox },
     name :'', 
     computed:{
       ...mapState('ArticleDetail',['ArticleDetail']),
       ...mapState('Login',['User'])
     },
     data() {
        return {
            funData:[                
                {label:'修改博客',icon:'file-pen',value:0,color:'#409EFF',state:1,click:this.editArticle,time:0,type:1},
                {label:'博客权限',icon:'lock',value:0,color:'#FF493C',state:1,click:this.OpenAuthority,time:0,type:1},
                {label:'删除博客',icon:'trash-can',value:0,color:'red',state:1,click:this.beforeDelete,time:0,type:1},
            ]
        }
     },

     methods: {
         ...mapMutations('ArticleDetail',['ARTICLEDETAILSETDOWN','SETARTICLEDETAILAUTHORITY']), //关闭事件 隐私组件
         ...mapMutations('Article',['SETPUBLISHSTATE','SETPUBLISHTYPE']),//打开文章编辑框色 设置编辑类型->1:发布 2:修改
         ...mapActions('Article',['deleteArticle']), // 删除
         getIconStyle(color){//icon 图标颜色
           return{color}
         },
         SelectFun(fun){
             if(fun.click == null) return this.$message.warning('功能暂未实现')
             if(this.User == null) return this.$public.toLogin()
             fun.click(fun)
        },
        //打开隐私组件框
        OpenAuthority(){
             this.ARTICLEDETAILSETDOWN()   
             this.SETARTICLEDETAILAUTHORITY(true)
        },
        //修改文章
        editArticle(){
            this.ARTICLEDETAILSETDOWN()   
            this.SETPUBLISHTYPE(2)
            let data ={}
            let newArticleDetail = Object.assign({},this.ArticleDetail)
            newArticleDetail.content = newArticleDetail.oldContent

            if(newArticleDetail.classify == 1){
                data.index = 2
                data.title = '修改图文'
                data.data = newArticleDetail
            }else if(newArticleDetail.classify == 2){
                data.index = 3
                data.title = '修改视频'
                data.data = newArticleDetail
            }else{
                data.index = 4
                data.title = '修改MarkDown'
                data.data = newArticleDetail

            }

            this.SETPUBLISHSTATE(data)
        },
           //删除之前
         beforeDelete(fun) {
              this.$confirm('此操作将永久删除该文章, 是否继续?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
               }).then(() => {
                     this.deleteArticle_(fun)
               },()=>{})
         },
        async deleteArticle_(){
            let id = this.ArticleDetail?.id || 0   
            let res = await this.deleteArticle(id)
            if(res.code == 200){
               this.$message.success('删除成功')
               this.ARTICLEDETAILSETDOWN()
               this.$router.push('/home')
            }
            else this.$message.error(res.message)
        },

     },
  }
</script>
<style scoped lang='less'>
#content{
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    overflow: auto;

    .dataOne{
        width: 150px;
        height:150px;
        border-radius: 5px;
        margin: 10px;
        color: var(--fontColor);
        background: var(--BackColor);
    }
    .icon{
        margin-top: 10px;
        font-size: 50px;
    }
    .label{
        width: 100%;
        text-align: center;
        font-size: 18px;
        margin-bottom: 10px;
    }
     
}


</style>